import React from 'react';
import { UnControlled as CodeMirror } from 'react-codemirror2';
// eslint-disable-next-line no-unused-vars
import * as codemirror from 'codemirror';


// 引入全局样式
import 'codemirror/lib/codemirror.css';
// // 主题风格
import 'codemirror/theme/dracula.css';
// // 代码模式
import 'codemirror/mode/javascript/javascript';

// 添加折叠
require('codemirror/addon/fold/brace-fold.js');
require('codemirror/addon/fold/comment-fold.js');
require('codemirror/addon/fold/foldcode.js');
require('codemirror/addon/fold/foldgutter.js');
require('codemirror/addon/fold/foldgutter.css');

// 括号匹配
require('codemirror/addon/edit/matchbrackets.js');

// 自动补全
require('codemirror/addon/hint/show-hint.css');
require('codemirror/addon/hint/show-hint.js');
require('codemirror/addon/hint/anyword-hint.js');

// 代码检查错误
require('codemirror/addon/lint/json-lint.js');
require('codemirror/addon/lint/lint.css');
require('codemirror/addon/lint/lint.js');
const jsonlint = require('jsonlint-mod');

window['jsonlint'] = jsonlint; // 不能删除，json-lint有依赖

// 引入格式化文件
const jsBeautify = require('js-beautify');

const CodeSnnipet = ({ snippet,onChange}) => {
  console.log('我这里懂了')
  return (
  <>
  <CodeMirror
      value={snippet || '{\n\n}'}
      options={{
        mode: 'application/json',
        theme: 'dracula',
        lineNumbers: true,
        smartIndent: true,
        tabSize: 0,
        lint: true,
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
      }}
      editorDidMount={(editor, data) => {
        // 格式化
        // editor.setValue(jsBeautify(data));
        console.log('mount')
      }}
      editorDidConfigure={editor => {
        console.log("configured");
      }}

      editorWillUnmount={editor => {
            console.log("unmount");
      }}
      onChange={onChange}
    />
  </>
    
  );
} 
export default CodeSnnipet;